<template>
  <!-- <view class="page" :style="{ 'padding-top': `calc(25rpx + ${capsuleInfo?.bottom}px)` }"> </view> -->
  <view class="page">
    <view class="merchant_info content">
      <view class="left">
        <image class="logo" src="/static/avatar.png" mode="widthFix"></image>
        <view class="info" v-if="merchantInfo">
          <view class="name">{{ merchantInfo.merchant['merchantName'] }}</view>
          <view class="desc">
            <text class="t">品牌: {{ merchantInfo.brandCount }}</text>
            <!-- <text class="t">店铺: 9999</text> -->
            <text class="t">商品: {{ merchantInfo.goodsCount }}</text>
          </view>
        </view>
      </view>

      <view class="btn" @click="toggleAccount">
        <view class="text">切换店铺</view>
      </view>
    </view>

    <view class="statistic content">
      <view class="item" v-for="item in statisticOptions">
        <view class="label">{{ item.label }}</view>
        <view class="num">999</view>
        <view class="yesterday"> <text>昨日</text><text>347</text> </view>
      </view>
    </view>

    <view class="manager content">
      <view class="item" @click="goPage(item)" v-for="item in managerOptions">
        <image class="img" :src="item.icon" mode="widthFix"></image>
        <view class="label">{{ item.label }}</view>
      </view>
    </view>

    <view class="banner content">
      <image class="img" src="/static/banner.jpg" mode="aspectFill"></image>
    </view>

    <view class="news content">
      <div class="h">推送动态</div>
      <div class="list">
        <div class="item" v-for="item in 1">
          <image class="img" src="/static/msg.png" mode="aspectFill"></image>
          <div class="section">
            <!-- <div class="title">我的摄影艺术</div>
            <div class="desc">在用镜头写信，寄给每一个曾在画面里停留的人。</div> -->

            <div class="title">暂无动态</div>
            <!-- <div class="desc">在用镜头写信，寄给每一个曾在画面里停留的人。</div> -->
          </div>
        </div>
      </div>
    </view>

    <div class="empty_box" :style="{ height: barHeight + 'px' }"></div>
  </view>

  <tabBar :current="0" @barHeight="setBarheight" />
</template>

<script setup>
  import { ref, computed } from 'vue';
  import { onShow, onLoad } from '@dcloudio/uni-app';
  import tabBar from '../../components/tabbar/tabbar';
  import { queryMerchantInfo } from '../../apis/pages';
  import { useFormStore } from '../../store/form';

  const formStore = useFormStore();

  uni.hideTabBar();

  const statisticOptions = [
    {
      label: '门店浏览量',
    },
    {
      label: '门店访客数',
    },
    {
      label: '商品浏览量',
    },
    {
      label: '商品下单数',
    },
    {
      label: '商品售出数',
    },
    {
      label: '商品核销数',
    },
    {
      label: '商品订单金额',
    },
    {
      label: '商品核销金额',
    },
  ];

  const managerOptions = [
    {
      label: '创建品牌',
      path: '/pagesB/brand/index',
      icon: '/static/icon/brand.png',
    },
    {
      label: '创建店铺',
      path: '/pagesB/shop/index?from=home',
      icon: '/static/icon/shop.png',
    },

    {
      label: '创建商品',
      path: '/pagesB/goods/index?from=home',
      icon: '/static/icon/goods.png',
    },
    {
      label: '创建券包',
      path: '/pagesB/coupon/index?from=home',
      icon: '/static/icon/coupon.png',
    },
    {
      label: '商户管理',
      path: '/pagesB/merchant/manage',
      icon: '/static/icon/all.png',
    },
    {
      label: '全部商品',
      path: '/pagesB/goods/all',
      icon: '/static/icon/all_goods.png',
    },
    {
      label: '全部券包',
      path: '/pagesB/coupon/all',
      icon: '/static/icon/all_coupon.png',
    },
    {
      label: '扫码核销',
      path: 'developing',
      icon: '/static/icon/scan.png',
    },
    {
      label: '核销记录',
      path: 'developing',
      icon: '/static/icon/record.png',
    },
    {
      label: '店铺装修',
      path: 'developing',
      icon: '/static/icon/decorate.png',
    },
  ];

  const merchantInfo = ref('');
  const barHeight = ref('');

  onShow(() => {
    // 重置所有表单
    formStore.resetBrandForm();
    formStore.resetShopForm();
    formStore.resetGoodsForm();
    formStore.resetCouponForm();
  });

  onLoad(() => {
    console.log('onLoad');

    getMerchantInfo();
  });

  function getMerchantInfo() {
    queryMerchantInfo().then((res) => {
      console.log(res, '商户信息  >>>>');
      merchantInfo.value = res;
    });
  }
  function goPage(data) {
    if (data.path == 'developing') {
      uni.showToast({
        title: data.label + '开发中',
        icon: 'none',
      });
      return;
    }

    if (data.path) {
      uni.navigateTo({
        url: data.path,
      });
    } else {
      console.info('未配置跳转路径');
    }
  }
  function setBarheight(height) {
    barHeight.value = height;
  }

  function toggleAccount() {
    uni.navigateTo({
      url: '/pages/index/toggle',
    });
  }
</script>

<style scoped lang="scss">
  .page {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    padding: 20rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    color: #1e2737;
    background-color: #f0f0f0;
    background-image: url('/static/bg.png');
    background-position: 0 0;
    background-size: 100% auto;
    background-repeat: no-repeat;
  }

  .bg_img {
    position: absolute;
    width: 100vw;
    top: 0;
    z-index: -1;
  }

  .content {
    background-color: #fff;
    padding: 20rpx;
    border-radius: 20rpx;
    box-sizing: border-box;
    margin-bottom: 25rpx;
  }

  .merchant_info {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: transparent;
    margin-bottom: 0;

    // margin-bottom: 30rpx;

    .left {
      display: flex;
      align-items: center;
    }

    .logo {
      width: 128rpx;
      height: 128rpx;
      vertical-align: middle;
      margin-right: 20rpx;
      border-radius: 50%;
    }

    .name {
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
      margin-bottom: 15rpx;
    }

    .desc {
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 24rpx;
      color: #565656;
      line-height: 24rpx;

      .t {
        padding: 0 10rpx;
      }

      .t:not(:nth-last-child(1)) {
        border-right: 2rpx solid #565656;
      }
    }

    .btn {
      position: absolute;
      top: 30rpx;
      right: 30rpx;
      width: 128rpx;
      height: 44rpx;
      background-image: url('/static/toggle.png');
      background-repeat: no-repeat;
      background-size: 100%;

      .text {
        position: absolute;
        right: 11rpx;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 500;
        font-size: 18rpx;
        color: #343434;
      }
    }
  }

  .statistic {
    display: flex;
    flex-wrap: wrap;
    padding: 40rpx 35rpx;
    row-gap: 40rpx;

    .item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 25%;
      &:not(:nth-child(4n))::after {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        content: '';
        display: block;
        width: 2rpx;
        height: 36rpx;
        background-color: #a2aabc;
      }

      // &::after {
      //   position: absolute;
      //   top: 50%;
      //   right: 0;
      //   transform: translateY(-50%);
      //   content: '';
      //   display: block;
      //   width: 2rpx;
      //   height: 36rpx;
      //   background-color: #a2aabc;
      // }

      .label {
        font-size: 20rpx;
      }

      .num {
        padding: 12rpx 0;
        font-weight: 500;
        font-size: 26rpx;
      }

      .yesterday text {
        font-size: 20rpx;

        &:nth-child(2) {
          color: #016bec;
        }
      }
    }
  }

  .manager {
    display: flex;
    flex-wrap: wrap;
    row-gap: 20rpx;
    font-size: 24rpx;
    padding-top: 43rpx;
    padding-bottom: 43rpx;

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 20%;

      .img {
        width: 60rpx;
        height: 60rpx;
        vertical-align: middle;
        margin-bottom: 10rpx;
      }
    }
  }

  .banner {
    width: 100%;
    height: 240rpx;
    padding: 0;
    overflow: hidden;
    .img {
      width: 100%;
      height: 100%;
      vertical-align: middle;
    }
  }

  .news {
    background-color: transparent;
    padding: 0;
    .h {
      font-weight: 600;
      font-size: 30rpx;
      color: #1e2737;
      margin-bottom: 20rpx;
    }

    .list {
      .item {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        border-radius: 30rpx;
        margin-bottom: 20rpx;
        padding: 32rpx 38rpx;
        box-sizing: border-box;

        .img {
          width: 85rpx;
          min-width: 85rpx;
          height: 60rpx;
          vertical-align: middle;
          margin-right: 24rpx;
        }

        .section {
          flex: 1;
          .title {
            font-weight: 500;
            font-size: 26rpx;
            color: #1e2737;
            margin-bottom: 10rpx;
          }
          .desc {
            font-size: 22rpx;
            color: #1e2737;
            opacity: 0.8;
          }
        }
      }
    }
  }
</style>
